// out:false
// 设置全局变量
@bgc: #b7d4a8;


body {
    // 怎么让body的高度撑满
    height         : 90vh;
    display        : flex;
    justify-content: center;
    align-items    : center;
    font-weight    : bold;
    font-size      : 20px;
    font-family    : "Courier";

    // 游戏的容器
    .main {
        box-sizing      : border-box;
        width           : 360px;
        height          : 420px;
        background-color: @bgc;
        border          : 10px solid black;
        border-radius   : 20px;
        padding-top     : 20px;
        display         : flex;
        flex-direction  : column;

        // 🐍的运动舞台
        .stage {
            width     : 304px;
            height    : 304px;
            box-sizing: border-box;
            border    : 2px solid #000;
            margin    : 0 auto;
            position  : relative;

            #snake {
                .snake-body {
                    position        : absolute;
                    height          : 10px;
                    width           : 10px;
                    box-sizing      : border-box;
                    border          : 1px solid @bgc;
                    background-color: #000;
                    left            : 150px;
                    top             : 150px;
                }
            }

            // 食物
            #food {
                position       : absolute;
                left           : 50px;
                top            : 30px;
                width          : 10px;
                height         : 10px;
                display        : flex;
                flex-flow      : row wrap;
                justify-content: space-between;
                align-items    : space-between;

                // 设置食物的样式
                .food-body {
                    width           : 4px;
                    height          : 4px;
                    background-color: black;
                    transform       : rotate(45deg);
                }
            }

            #end {
                position   : absolute;
                font-size  : 18px;
                width      : 200px;
                height     : 100px;
                color      : black;
                left       : 0;
                right      : 0;
                bottom     : 0;
                top        : 0;
                margin     : auto;
                text-align : center;
                font-weight: bold;
                font-family: Georgia, 'Times New Roman', Times, serif;

                #finally-score {
                    font-family: Courier;
                    font-weight: bold;
                }

                #reset{
                    font-size: 13px;
                }

            }
        }

        // 游戏信息展示区域
        .score-panel {
            flex           : 1;
            width          : 304px;
            height         : 60px;
            margin         : 10px auto;
            margin-bottom  : 0px;
            display        : flex;
            flex-direction : column;
            justify-content: space-around;
            align-items    : center;
        }

    }
}